<template>
    <div class="login">
        <div class="imgBox">
            <van-icon name="arrow-left" size="20px" @click="goback()" />
        </div>
        <div class="title">
            密码登录
        </div>
        <van-cell-group>
            <van-field v-model="username" label="手机号" placeholder="请输入手机号" type="number" />

            <van-field v-model="password" type="password" label="密码" placeholder="密码长度为6-12位数字" />
        </van-cell-group>

        <!-- 登录 -->
        <div class="denglu" @click="goHome()">
            登录
        </div>

        <!-- 忘记密码 -->
        <!-- <router-link to="/forget"> -->
        <div class="forget" @click="goForget(type)">
            {{type}}
        </div>
        <!-- </router-link> -->
    </div>
</template>

<script>

    import { mapMutations, mapState } from 'vuex'
    import { Toast } from "vant"
    export default {
        data() {
            return {
                username: "",
                password: "",
                type: "忘记密码"
            }
        },
        computed: mapState(['userPhone']),
        mounted() {
           
        },
        methods: {
            // 如果methods里面还有其他函数，就要在辅助函数名称的前面加上扩展运算符
            ...mapMutations(['changeToken', 'changeUserid', 'changeuserPhone']),
            // ...mapState(['token', 'userPhone', 'userid']),

            cleanInput() {
                this.username = "";
            },
            goForget(type) {
                console.log(type)
                localStorage.setItem("type", type)
                this.$router.push(
                    {
                        name: 'forget',
                        params: {
                            type
                        }
                    }
                )
            },
            goHome() {
                const { username, password } = this
                //console.log("登录")
                // 前端检验，用户名和密码必填
                if (!username || !password) {
                    // 使用mint-ui的弹框提示组件
                    Toast({
                        message: '请填写用户名和密码', // 显示内容
                        duration: 1000 // 显示时间
                    })
                    return false
                }
                var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if (!myreg.test(username)) {
                    Toast({
                        message: '请输入正确的手机号码', // 显示内容
                        duration: 1000 // 显示时间
                    })
                    return false;
                } else {

                    // const { username, password } = this

                    // 前端检验，用户名和密码必填
                    if (!username || !password) {
                        // 使用mint-ui的弹框提示组件
                        Toast({
                            message: '请填写用户名和密码', // 显示内容
                            // position: 'middle', // 显示位置，默认middle
                            duration: 3000 // 显示时间
                        })

                        return false
                    }

                    // 发出请求
                    this.$axios.get("/login/userlogin", {
                        params: {
                            login_name: username,
                            password: password
                        }
                    }).then((res) => {
                        const { status, message, data } = res
                        if (data.code == 200) {
                            const { token, userid } = data
                            // 把token存到本地
                            localStorage.setItem('token', token)
                            localStorage.setItem('userid', userid)
                            localStorage.setItem('userPhone', this.username)
                            // 把token存到store
                            this.changeToken(token)
                            this.changeUserid(userid)
                            this.changeuserPhone(this.username)
                            Toast({
                                message: message,
                            })
                            this.$router.push(
                                {
                                    name: 'home',
                                    params: {
                                        username
                                    }
                                }
                            )
                        } else {
                            Toast(data.message)
                        }
                    }).catchError

                }

            },
            goback() {
                this.$router.back()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .login {
        /* padding-top: 30px; */
        overflow: hidden;
    }

    .imgBox {
        position: fixed;
        left: 4px;
        top: 10px;
        overflow: hidden;
        width: 24px;
        height: 20px;
    }

    .goback {
        width: 20px;
        height: 24px;
    }

    .title {

        margin: 30px 0;
        margin-left: 12px;
        width: 115px;
        height: 30px;
        color: rgba(16, 16, 16, 1);
        font-size: 28px;
        text-align: left;
        font-family: SourceHanSansSC-bold;
        font-weight: 900;
    }

    #username,
    #password {
        width: 99%;
        height: 36px;
        margin: 0 auto;
    }

    .cell {
        text-align: center;
        position: relative;


    }

    .cell img {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 4px;
        top: 8px;
    }

    .denglu {
        margin: 0 auto;
        margin-top: 30px;
        width: 99%;
        height: .96rem;
        border-radius: 4px;
        background-color: #07c160;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        text-align: center;
        font-family: Microsoft Yahei;
        border: 1px solid rgba(187, 187, 187, 1);
        line-height: .96rem;
        max-height: 48px;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .forget {
        margin-left: 6px;
        margin-top: 8px;
        width: 70px;
        height: 20px;
        color: #999;
        font-size: 14px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
    }
</style>